<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="../jquery.js"></script>
<body>
<div id="parent">parent
    　　<div id="child" class="child">child</div>
</div>

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
</ul>
</body>
<script>
    document.getElementById("parent").addEventListener("click",function(e){
        alert("parent事件被触发，"+this.id);
    },true);
    document.getElementById("child").addEventListener("click",function(e){
        alert("child事件被触发，"+this.id)
    });

    //冒泡实现      鼠标放到li上对应的li背景变灰。
    $("ul").on("mouseover",function(e){
        $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
    })

</script>
</html>